<template>
  <div class="askQues">
    <center-border :text="askQues" :show="false">
      <div class="content">
        <el-table :data="tableData" style="width: 100%;height: 100%;overflow: auto;margin-top:1%;"
          :header-cell-style="{ background: '#083556 !important', color: '#0BEAF2' }">
          <el-table-column label="序号" width="60" type="index"> </el-table-column>
          <el-table-column prop="TransTime" label="发生时间" width="180">
            <template slot-scope="{row}">
              <span>{{ parseTime(row.TransTime) }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="DeviceName" label="发生资产" width="180" show-overflow-tooltip></el-table-column>
          <el-table-column label="事件等级" show-overflow-tooltip prop="Level" width="100">
            <template slot-scope="{row}">
              <span style="background: #942040;color: #fff;padding: 4px 8px;border-radius: 2px;"
                v-show="row.EventLevel == '1'">紧急</span>
              <span style="background: #E6A23C;color: #fff;padding: 4px 8px;border-radius: 2px;"
                v-show="row.EventLevel == '2'">重要</span>
              <span style="background: #909399;color: #fff;padding: 4px 8px;border-radius: 2px;"
                v-show="row.EventLevel == '3'">默认</span>
              <span style="background: #1a70b7;color: #fff;padding: 4px 8px;border-radius: 2px;"
                v-show="row.EventLevel == '4'">普通</span>
              <span style="background: #67C23A;color: #fff;padding: 4px 8px;border-radius: 2px;"
                v-show="row.EventLevel == '5'">告知</span>
            </template>
          </el-table-column>
          <el-table-column prop="Descp" label="描述信息" show-overflow-tooltip></el-table-column>
        </el-table>
      </div>
    </center-border>
  </div>
</template>

<script>
import Cookies from 'js-cookie'
import centerBorder from './centerBorder.vue'
import { connrequest2 } from "@/api/firstPage.js"
import { parseTime } from "@/utils/index.js";
export default {
  name: "latestInquiry",
  components: {
    centerBorder
  },
  props:{
    days: {
      type: Number,
      default: 7
    },
  },
  data() {
    return {
      libText: "企业智库增长趋势图",
      dSUseText: "本地deepseek调用趋势图",
      askQues: "最近事件分析",
      tableData: []
    }
  },
  created() {
    this.getData()
  },
  methods: {
    parseTime,
    async getData() {
      let endTime = new Date(new Date().setHours(0, 0, 0, 0)).getTime()
      let startTime = endTime - (this.days * 1 * 3600 * 24 * 1000);
      const data = {
        Paging: {
          QueryPageNo: 1,
          QueryPageLength: 5,
        },
        Filter: {
          StartTime: parseTime(startTime),
          EndTime: '',
        }
      }
      const res = await connrequest2('GetEventLog', data)
      this.tableData = res.Data
    }
  }
}
</script>

<style lang="scss" scoped>
.askQues {
  height: 30%;
}

.content {
  display: flex;
  align-items: center;
  justify-content: center;
}

::v-deep .el-table {
  color: #bbb;

  .cell {
    text-align: center;
    /* 内容居中对齐 */
    line-height: 24px;
  }

  .el-table__cell {
    padding: 8px 0;
  }

  tr {
    background-color: #07253e !important;
  }

  td.el-table__cell,
  th.el-table__cell.is-leaf {
    border-bottom: 1px solid #061f35;
  }

  thead {
    color: #0BEAF2;
  }

}

::v-deep .el-table--border::after,
.el-table--group::after,
.el-table::before {
  background-color: transparent;
}

::v-deep .el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell,
::v-deep .el-table,
::v-deep .el-table__expanded-cell {
  background-color: #07253e;
}

::v-deep .el-table th.el-table__cell {
  background-color: #053557;
}

::v-deep .el-table__row td:first-child {
  color: #5FBBF5 !important;
}</style>